<!--聊天室页面-->
<template>
    <div class="chatRoomWrap" ref="wrap">
        <Head :title="title" BackType2="true" NoticeType2="true" @PointClick="bindToChatInfo" BackType2Num="12"></Head>
        <div class="headPrevImg" v-if="previewImg">
            <img src="../assets/img/infoiconWhite.png" class="right" @click="imgOption">
        </div>
        <div class="content" ref="container">
            <div v-for="(item,index) in chatRecord">
                <div class="message" v-if="item.type === 'other'">
                    <div class="left">
                        <img src="../assets/img/messageAvatar.png">
                    </div>
                    <div class="right">
                        <div class="textContentWrap">
                            <p class="textContent">{{item.msg.txt}}</p>
                        </div>
                        <img src="../assets/img/angleOthers.png" class="angle">
                    </div>
                </div>


                <div class="messageAm" v-if="item.type === 'my'">
                    <div class="left">
                        <div class="textContentWrap">
                            <p class="textContent">{{item.msg.txt}}</p>
                        </div>
                        <img src="../assets/img/angleAm.png" class="angle">
                    </div>
                    <div class="right">
                        <img src="../assets/img/messageAvatar.png">
                    </div>
                </div>

            </div>


            <!--他人消息 other-->
            <!--  <div class="message">
                <div class="left">
                    <img src="../assets/img/messageAvatar.png">
                </div>
                <div class="right">
                    <div class="textContentWrap">
                        <p class="textContent">五一去哪玩？有打算吗？</p>
                    </div>
                    <img src="../assets/img/angleOthers.png" class="angle">
                </div>
            </div>  -->

            <!--本人消息 my-->
            <!--
            <div class="messageAm">
                <div class="left">
                    <div class="textContentWrap">
                        <p class="textContent">五一去哪玩？有打算吗？</p>
                    </div>
                    <img src="../assets/img/angleAm.png" class="angle">
                </div>
                <div class="right">
                    <img src="../assets/img/messageAvatar.png">
                </div>
            </div>-->

            <!--灰色提示消息 grey-->
            <!-- <div class="info">
                <p><span>2019-04-15 09:33</span></p>
            </div>-->

            <!--红色提示消息 red-->
            <!--<div class="infoHot">
                <p>
                    <img src="../assets/img/readBurn.png">
                    <span class="hotTxt">你开启了“<span class="hot">阅后即焚</span>”</span>
                </p>
            </div>-->

            <!--他人发送名片 otherCard-->
            <!--<div class="messageCard">
                <div class="left">
                    <img src="../assets/img/messageAvatar.png">
                </div>
                <div class="right">
                    <div class="textContentWrap">
                        <div class="card">
                            <div class="top">
                                <img src="../assets/img/messageAvatar.png">
                                <div class="rights">
                                    <p class="title">爱萝莉真是太好了</p>
                                    <p class="account">账号：425958750</p>
                                </div>
                            </div>
                            <div class="bot">
                                <p>个人名片</p>
                            </div>
                        </div>
                    </div>
                    <img src="../assets/img/angleOthers.png" class="angle">
                </div>
            </div>-->

            <!--本人发送名片 myCard-->
            <!--<div class="messageCardAm">
                <div class="left">
                    <div class="textContentWrap">
                        <div class="card">
                            <div class="top">
                                <img src="../assets/img/messageAvatar.png">
                                <div class="rights">
                                    <p class="title">爱萝莉真是太好了</p>
                                    <p class="account">账号：425958750</p>
                                </div>
                            </div>
                            <div class="bot">
                                <p>个人名片</p>
                            </div>
                        </div>
                    </div>
                    <img src="../assets/img/angleAmC.png" class="angle">
                </div>
                <div class="right">
                    <img src="../assets/img/messageAvatar.png">
                </div>
            </div>-->

            <!--本人发送图片 myImg-->
            <!--<div class="messageImgAm">
                <div class="left">
                    <div class="textContentWrap">
                        <img src="../assets/img/messageAvatar.png" @click="PreviewImg">
                    </div>
                </div>
                <div class="right">
                    <img src="../assets/img/messageAvatar.png">
                </div>
            </div>-->

            <!--他人发送图片 otherImg-->
            <!--<div class="messageImg">
                <div class="left">
                    <img src="../assets/img/messageAvatar.png">
                </div>
                <div class="right">
                    <div class="textContentWrap">
                        <img src="../assets/img/messageAvatar.png" @click="PreviewImg">
                    </div>
                    <img src="../assets/img/angleOthers.png" class="angle">
                </div>
            </div>-->


        </div>

        <!--发送消息-->
        <div class="sendMessage" :class="{'inpStatus':inpStatus}">
            <input type="text" @focus="obtainFocus" v-model="sendTxt" @blur="loseFocue" @change="inpData"
                   @keydown.enter="sendData">
            <div class="send" v-show="inpStatus" @click="sendData" :class="{'active':sendTxt}">发送</div>
            <img src="../assets/img/faceIcon.png" class="face">
            <img src="../assets/img/imgIcon.png" class="imgIcon">
        </div>

        <van-actionsheet
            v-model="showImgOpt"
            cancel-text="取消"
            :actions="actions"
            @select="selectImgOpt"
            :overlay="false"
            :close-on-click-overlay="true"
        />

    </div>
</template>

<script>
    import Head from "../components/Head";
    import {ImagePreview} from 'vant';
    import {Actionsheet} from 'vant';
    import Url from "../untils/configUrl";

    export default {
        data() {
            return {
                active_id: null,
                friend_client_id: null,
                title: "名称名称名称名",
                inpStatus: true,
                sendTxt: "",
                previewImg: false,  //操作图片顶样式
                showImgOpt: false,  //图片底部操作区是否显示
                oPreviewImg: null,  //图片显示插件对象
                actions: [
                    {
                        name: '转发',
                        id: 1
                    },
                    {
                        name: '撤回',
                        id: 2
                    },
                    {
                        name: '删除',
                        id: 3
                    }
                ],
                chatRecord: [
                    {
                        type: "other",
                        msg: {
                            txt: "asdas"
                        }
                    },
                    {
                        type: "other",
                        msg: {
                            txt: "asdas"
                        }
                    },
                    {
                        type: "my",
                        msg: {
                            txt: "asdas"
                        }
                    },
                    {
                        type: "other",
                        msg: {
                            txt: "asdas"
                        }
                    },
                    {
                        type: "my",
                        msg: {
                            txt: "asdas"
                        }
                    },
                    {
                        type: "other",
                        msg: {
                            txt: "asdas"
                        }
                    },
                    {
                        type: "my",
                        msg: {
                            txt: "asdas"
                        }
                    }
                ]
            }
        },
        methods: {
            obtainFocus() {
                //获取焦点
                setTimeout(() => {
                    document.body.scrollTop = 1000;
                }, 300);
                this.inpStatus = true;
            },
            loseFocue() {
                //失去焦点
                // this.inpStatus = false
            },
            sendData() {
                //发送信息
                if (!this.sendTxt) {
                    return
                }

                this.$post(Url.urlConfig.sendMessage, {
                    cmd: "user",
                    active_id: this.active_id,
                    send_to_id: this.friend_client_id,
                    msg: this.sendTxt,
                    type: "1"
                }).then((res) => {
                    // console.log(res);
                });
                this.chatRecord.push({
                    type: "my",
                    msg: {
                        txt: this.sendTxt
                    }
                });
                this.$nextTick(()=>{
                    this.showBottom();
                });
                this.sendTxt = null;
            },
            inpData() {
                //正在输入

            },
            bindToChatInfo() {
                this.$router.push('/chatinfoGroup')
            },
            //图片预览
            PreviewImg() {
                let that = this;
                this.previewImg = true;
                this.oPreviewImg = ImagePreview({
                    images: [
                        'http://192.168.50.59/20.png',
                        'http://192.168.50.59/20.png'
                    ],
                    showIndex: false,
                    loop: false,
                    onClose() {
                        that.previewImg = false;
                        that.showImgOpt = false
                    }
                });
            },
            imgOption() {
                this.showImgOpt = !this.showImgOpt
            },
            selectImgOpt(item) {
                if (item.id === 1) {
                    this.$router.push("/selectcard");
                    this.oPreviewImg.close();
                    this.previewImg = false;
                    this.showImgOpt = false;
                }
            },
            showBottom(){
                let oContainer = this.$refs.container;
                oContainer.scrollTop = oContainer.scrollHeight;
            }
        },
        components: {
            Head,
            [Actionsheet.name]: Actionsheet
        },
        mounted() {
            this.$nextTick(()=>{
                this.showBottom();
            });
        },
        created() {
            let friendId = this.$route.query.friendId;
            this.title = this.$route.query.remark;
            this.$get(Url.urlConfig.chatFriendIndex, {friendId: friendId}).then((res) => {
                this.friend_client_id = res.data.friend_client_id
            });
            let active_id = localStorage.getItem('active_id');
            this.active_id = active_id;

        }
    }
</script>

<style scoped lang="less">

    .chatRoomWrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #f1f5f8;
        /*聊天信息容器*/

        .content {
            position: absolute;
            width: 100%;
            top: 88px;
            bottom: 100px;
            background-color: #F1F5F8;
            overflow-y: scroll;
            padding-bottom: 30px;
            -webkit-overflow-scrolling: touch;

            /*他人文本消息*/

            .message {
                display: flex;
                margin-top: 30px;

                .left {
                    width: 90px;
                    height: 90px;
                    margin-left: 27px;

                    img {
                        width: 90px;
                        height: 90px;
                        border-radius: 3px;
                    }
                }

                .right {
                    position: relative;
                    margin-left: 27px;

                    .angle {
                        position: absolute;
                        z-index: 99;
                        left: -7.8px;
                        top: 0;
                        width: 7.8px;
                        height: 8px;
                    }

                    .textContentWrap {
                        padding: 23px 27px;
                        background: rgba(255, 255, 255, 1);
                        border-radius: 0px 22px 22px 22px;

                        .textContent {
                            max-width: 420px;
                            font-size: 28px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: rgba(92, 92, 92, 1);
                            line-height: 34px;
                        }
                    }
                }
            }

            /*本人文本消息*/

            .messageAm {
                display: flex;
                justify-content: flex-end;
                margin-top: 30px;

                .left {
                    position: relative;
                    margin-right: 27px;

                    .angle {
                        position: absolute;
                        z-index: 99;
                        right: -8px;
                        top: 0;
                        width: 7.8px;
                        height: 8px;
                    }

                    .textContentWrap {
                        padding: 23px 27px;
                        background: #627DF1;
                        border-radius: 22px 0px 22px 22px;

                        .textContent {
                            max-width: 420px;
                            font-size: 28px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: rgba(255, 255, 255, 1);
                            line-height: 34px;
                        }
                    }
                }

                .right {
                    width: 90px;
                    height: 90px;
                    margin-right: 27px;

                    img {
                        width: 90px;
                        height: 90px;
                        border-radius: 3px;
                    }
                }
            }

            /*灰色提时间消息*/

            .info {
                margin: 60px 0 50px 0;
                display: flex;
                justify-content: center;

                p {
                    padding: 12px 31px;
                    background: rgba(230, 233, 236, 1);
                    border-radius: 20px;

                    span {
                        font-size: 22px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(173, 176, 187, 1);
                    }
                }
            }

            /*红色提示消息*/

            .infoHot {
                display: flex;
                justify-content: center;

                p {
                    padding: 12px 31px;
                    background: #FFE8E4;
                    border-radius: 20px;

                    img {
                        width: 20px;
                        height: 26px;
                    }

                    .hotTxt {
                        color: #d3aaa3;

                        .hot {
                            color: #f16953;
                        }
                    }
                }
            }

            /*他人名片*/

            .messageCard {
                display: flex;
                margin-top: 30px;

                .left {
                    width: 90px;
                    height: 90px;
                    margin-left: 27px;

                    img {
                        width: 90px;
                        height: 90px;
                        border-radius: 3px;
                    }
                }

                .right {
                    position: relative;
                    margin-left: 27px;

                    .angle {
                        position: absolute;
                        z-index: 99;
                        left: -7.8px;
                        top: 0;
                        width: 7.8px;
                        height: 8px;
                    }

                    .textContentWrap {
                        padding: 23px 27px 0 27px;
                        background: rgba(255, 255, 255, 1);
                        border-radius: 0px 22px 22px 22px;

                        .textContent {
                            max-width: 420px;
                            font-size: 28px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: rgba(92, 92, 92, 1);
                            line-height: 34px;
                        }

                        .card {
                            .top {
                                display: flex;
                                width: 418px;
                                height: 115px;
                                border-bottom: 1px solid #D6D7DC;

                                img {
                                    width: 90px;
                                    height: 90px;
                                }

                                .rights {
                                    display: flex;
                                    flex-direction: column;
                                    margin-left: 20px;

                                    .title {
                                        font-size: 32px;
                                        font-family: PingFangSC-Regular;
                                        font-weight: 400;
                                        color: rgba(50, 50, 50, 1);
                                        line-height: 49px;
                                        width: 300px;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }

                                    .account {
                                        font-size: 22px;
                                        font-family: PingFangSC-Regular;
                                        font-weight: 400;
                                        color: rgba(153, 153, 153, 1);
                                        line-height: 43px;
                                    }
                                }
                            }

                            .bot {
                                p {
                                    font-size: 20px;
                                    font-family: PingFangSC-Regular;
                                    font-weight: 400;
                                    color: rgba(153, 153, 153, 1);
                                    line-height: 42px;
                                }
                            }
                        }
                    }
                }
            }

            /*本人名片*/

            .messageCardAm {
                display: flex;
                justify-content: flex-end;
                margin-top: 30px;

                .left {
                    position: relative;
                    margin-right: 27px;

                    .angle {
                        position: absolute;
                        z-index: 99;
                        right: -8px;
                        top: 0;
                        width: 7.8px;
                        height: 8px;
                    }

                    .textContentWrap {
                        padding: 23px 27px 0 27px;
                        background: #fff;
                        border-radius: 22px 0px 22px 22px;

                        .textContent {
                            max-width: 420px;
                            font-size: 28px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: rgba(255, 255, 255, 1);
                            line-height: 34px;
                        }

                        .card {
                            .top {
                                display: flex;
                                width: 418px;
                                height: 115px;
                                border-bottom: 1px solid #D6D7DC;

                                img {
                                    width: 90px;
                                    height: 90px;
                                }

                                .rights {
                                    display: flex;
                                    flex-direction: column;
                                    margin-left: 20px;

                                    .title {
                                        font-size: 32px;
                                        font-family: PingFangSC-Regular;
                                        font-weight: 400;
                                        color: rgba(50, 50, 50, 1);
                                        line-height: 49px;
                                        width: 300px;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }

                                    .account {
                                        font-size: 22px;
                                        font-family: PingFangSC-Regular;
                                        font-weight: 400;
                                        color: rgba(153, 153, 153, 1);
                                        line-height: 43px;
                                    }
                                }
                            }

                            .bot {
                                p {
                                    font-size: 20px;
                                    font-family: PingFangSC-Regular;
                                    font-weight: 400;
                                    color: rgba(153, 153, 153, 1);
                                    line-height: 42px;
                                }
                            }
                        }
                    }
                }

                .right {
                    width: 90px;
                    height: 90px;
                    margin-right: 27px;

                    img {
                        width: 90px;
                        height: 90px;
                        border-radius: 3px;
                    }
                }
            }

            /*本人图片消息*/

            .messageImgAm {
                display: flex;
                justify-content: flex-end;
                margin-top: 30px;

                .left {
                    position: relative;
                    margin-right: 27px;

                    .angle {
                        position: absolute;
                        z-index: 99;
                        right: -8px;
                        top: 0;
                        width: 7.8px;
                        height: 8px;
                    }

                    .textContentWrap {
                        width: 210px;
                        height: 280px;

                        img {
                            width: 210px;
                            height: 280px;
                            border-radius: 10px;
                        }
                    }
                }

                .right {
                    width: 90px;
                    height: 90px;
                    margin-right: 27px;

                    img {
                        width: 90px;
                        height: 90px;
                        border-radius: 3px;
                    }
                }
            }

            /*他人图片消息*/

            .messageImg {
                display: flex;
                margin-top: 30px;

                .left {
                    width: 90px;
                    height: 90px;
                    margin-left: 27px;

                    img {
                        width: 90px;
                        height: 90px;
                        border-radius: 3px;
                    }
                }

                .right {
                    position: relative;
                    margin-left: 27px;

                    .angle {
                        position: absolute;
                        z-index: 99;
                        left: -7.8px;
                        top: 0;
                        width: 7.8px;
                        height: 8px;
                    }

                    .textContentWrap {
                        img {
                            width: 210px;
                            height: 280px;
                            border-radius: 10px;
                        }
                    }
                }
            }

        }

        .sendMessage {
            display: flex;
            align-items: center;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 999;
            width: 100%;
            height: 100px;
            background: #fff;
            padding-left: 94px;
            box-sizing: border-box;

            input {
                width: 480px;
                height: 60px;
                background: rgba(237, 237, 237, 1);
                border-radius: 30px;
                margin-right: 40px;
                box-sizing: border-box;
                padding: 0 25px;
                font-size: 24px;
            }

            img {
                width: 42px;
                height: 42px;
            }

            .send {
                position: absolute;
                right: 25px;
                top: 20px;
                width: 90px;
                height: 60px;
                text-align: center;
                line-height: 60px;
                background: #CED1D6;
                border-radius: 10px;
                font-size: 24px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: #b0b5bc;
            }

            .active {
                background-color: #adb3bd;
                color: rgba(0, 0, 0, 1);
            }

            .face {
                margin-right: 20px;
            }

        }

        .inpStatus {

            input {
                position: absolute;
                top: 50%;
                left: 159px;
                margin-top: -30px;
                width: 441px;
            }

            .face {
                position: absolute;
                top: 50%;
                left: 25px;
                margin-top: -21px;
            }

            .imgIcon {
                position: absolute;
                top: 50%;
                left: 87px;
                margin-top: -21px;
            }
        }

        .headPrevImg {
            display: flex;
            align-items: center;
            padding: 0 25px;
            box-sizing: border-box;
            justify-content: flex-end;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 88px;
            z-index: 9999;

            .right {
                width: 37px;
                height: 6px;
            }
        }

    }

</style>

